<template>
  <el-container>
    <el-aside width="auth">
      <div class="aside-top">
        <el-menu
            :default-active="$route.path"
            router
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            text-color="#ffff"
            background-color="transparent"
            :unique-opened="true">
                    <el-submenu v-for="item in navList" :key="item.id" :index="item.id.toString()">
                      <template slot="title">
                        <i :class="item.icon"></i>
                        <span>{{item.label}}</span>
                      </template>
                        <el-menu-item v-for="it in item.submenu" :key="it.id" :index="it.path" :disabled="it.start == 1 ? false:true">
                          <i :class="it.icon"></i>{{ it.label }}
                        </el-menu-item>
                    </el-submenu>
        </el-menu>
      </div>
      <div class="aside-down">
        <i :class="isCollapse == false ? 'el-icon-arrow-left':'el-icon-arrow-right'" @click="isCollapse = !isCollapse"></i>
      </div>
    </el-aside>
    <el-container>
      <el-header style="height: 40px;padding: 0px ;">
        <div class="el-header-left">
          <Tags></Tags>
        </div>
        <div class="el-header-right">
              right
        </div>
      </el-header>
      <el-main>
        <router-view>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import Tags from './page/tags/tags.vue'
export default {
  components:{
      Tags
  },
  name: 'Home',
  data() {
    return {
      isCollapse: false,
      navList:'',
    };
  },
  methods: {

  },created() {
    console.log(this.$route)
    if (this.$route.path == '/'){
      this.$router.push('/page1');
    }
    //TODO 代码写完后可解开以下注释从后端拿到导航菜单数据
    /*if (this.navList === null || this.navList === ''){
        this.$api.navigationMenu().then(res =>{
          this.navList = res.data;
        })
    }*/
    this.navList = [
      {
        "id": 1,
        "label": "企业管理",
        "icon": "el-icon-location",
        "path": null,
        "enFatherNode": "0",
        "sortOrder": 1,
        "start": 1,
        "submenu": [
          {
            "id": 2,
            "label": "选项1",
            "icon": "el-icon-location",
            "path": "/page1",
            "enFatherNode": "1",
            "sortOrder": 2,
            "start": 1,
            "submenu": [
              {
                "id": 4,
                "label": "选项1",
                "icon": "el-icon-location",
                "path": "/page3",
                "enFatherNode": "2",
                "sortOrder": 3,
                "start": 1,
                "submenu": null,
                "createUser": "admin",
                "createTime": "2024-07-12"
              }
            ],
            "createUser": "admin",
            "createTime": "2024-07-12"
          },
          {
            "id": 3,
            "label": "选项2",
            "icon": "el-icon-location",
            "path": "/page2",
            "enFatherNode": "1",
            "sortOrder": 2,
            "start": 1,
            "submenu": null,
            "createUser": "admin",
            "createTime": "2024-07-12"
          }
        ],
        "createUser": "admin",
        "createTime": "2024-07-12"
      },
      {
        "id": 5,
        "label": "资产管理",
        "icon": "el-icon-location",
        "path": null,
        "enFatherNode": "0",
        "sortOrder": 1,
        "start": 1,
        "submenu": [
        ],
        "createUser": "admin",
        "createTime": "2024-07-12"
      }
    ]
  }
}
</script>

<style>

.el-menu :hover{
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.el-menu-item {
  background-color: rgba(0, 0, 0, 0.1) !important;
}
.el-header-left{
  float: left;
  width: 50%;
}

.el-header-right{
  float: right;
  width: 50%;
}

.el-menu-item.is-active{
  border-left: solid 3px #26a1fa;
}
.aside-top{
  height: 97%;
}

.aside-down{
  height: 3%;
  text-align: center;
}
.aside-down>i{
  font-size: 24px;
  color: #ffffff;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  line-height: 40px;
}

.el-aside {
  background-color: #263238;
  color: #ffffff;
  height: 100vh;
  border-radius: 14px 0px 0 14px ;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
  margin: 0;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

